<template>
  <el-dialog
    title="配置表头"
    width="600px"
    :visible="detailflag"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <el-input
      v-model="searchValue"
      prefix-icon="el-icon-search"
      placeholder="请输入内容"
      style="width: 95%; margin: 0 10px"
    ></el-input>
       <div class="checkbox-box">

    <el-checkbox
      :indeterminate="isIndeterminate"
      v-model="checkAll"
      @change="handleCheckAllChange"
      >全选 {{ checkedList.length }} / 12</el-checkbox
    >
      <el-checkbox-group
      v-model="checkedList"
      @change="handleCheckedCitiesChange"
    >
      <el-checkbox v-for="item in closList" :key="item"  :label="item">
        {{ item }}
      </el-checkbox>
    </el-checkbox-group>
   </div>
    <div style="text-align:center;">
         <el-button @click="handleClose"  class="bootonclose"> 取消 </el-button>
      <el-button
        type="primary"
        @click="handleOk"
        class="bootonok"
      >
        确定
      </el-button>
   
    </div>
    <img src="@/assets/images/lodingBar.png" alt="" class="lodingBar">
  </el-dialog>
</template>

<script>
import {editTableHeader} from "@/api/dataStandard/standardManagement.js";
export default {
  name: "Logdialog",
  props: {
    detailflag: {
      type: Boolean,
    },
    //选中列
    checkedColumnList: {
      type: Array,
    },
    inputStatus: {
      type: String,
    },
    id: {
      type: String,
    },
    //所有的表头信息
    allHeaderList: {
      type: Array,
    },
    
  },
  data() {
    return {
      searchValue: "",
      // 选中的按钮组的值
      checkedList: [],
      // 按钮组选项
      // closList: [],
      //全部表格列
      isIndeterminate: true,
      checkAll: false,
      queryParams: {
        headerList: [],
      },
    };
  },
  computed: {
    closList() {
      let list = this.allHeaderList.map((item) => item.label);
      if (this.searchValue) {
        return list.filter((item) => {
          return item.includes(this.searchValue);
        });
      } else {
        return this.allHeaderList.map((item) => item.label);
      }
    },
  },
  mounted() {
    this.$nextTick(()=>{
    this.checkedList = [... new Set(this.checkedColumnList)];    
    })
    console.log(this.checkedColumnList,'this.checkedColumnList');
  },
  methods: {
    // 调接口获取表格最新数据，形成按钮组
    handleClose() {
      const arr = [];
      this.allHeaderList.forEach((item) => {
        const ifInclude = this.checkedColumnList.includes(item.label);
        if (ifInclude) {
          // 如果此列是选中列
          arr.push(item);
        }
      });
      // 选中列同步
      this.$emit("closeDynamicTable", arr);
    },
    handleOk() {
      // 有选中列
      const arr = [];
      this.allHeaderList.forEach((item) => {
        const ifInclude = this.checkedList.includes(item.label);
        if (ifInclude) {
          // 如果此列是选中列
          arr.push(item);
        }
      });
      // 选中列同步
      this.$emit("closeDynamicTable", arr);
        this.checkedList= [... new Set(this.checkedList)];
        this.checkedList.forEach((item) => {
          this.allHeaderList.forEach((i) => {
            if (item == i.label) {
              this.queryParams.headerList.push(i.prop);
            }
          });
        });
        editTableHeader(this.queryParams)
          .then((response) => {
            console.log(response,'222222222');
            if (response.success) {
              this.$modal.msgSuccess("修改成功");
              this.$parent.getTableTou();
            }
          })
          .catch((err) => {
             console.log(err);
          });
    },
    //全选
    handleCheckAllChange(val) {
      this.checkedList = val ? this.closList : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.closList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.closList.length;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";
::v-deep .el-dialog {
  height: 800px;
}
::v-deep .el-dialog__body {
  height: 91%;
  padding-left: 30px;
}
::v-deep .el-dialog__header {
  padding: 0;
  height: 70px;
  line-height: 70px;
  background-color:  $labelColor;
  position: relative;

}
::v-deep .el-dialog__title {
    color: #fff;
  margin-left: 30px;
  font-size: 18px;
}

::v-deep .el-dialog__headerbtn{
  top:50%;
  right:20px;
  transform: translate(0,-50%);
  z-index: 2;
} 
::v-deep .el-dialog__close {
  border: 1px solid #c0c4cc;
  color: #c0c4cc;
  border-radius: 50%;
}

.lodingBar{
  position: absolute;
  height: 70px;
  top: 0;
  right: 0;
  z-index: 1;
}
::v-deep .el-input__prefix{
padding-left: 20px;
}
::v-deep .el-input--medium .el-input__inner{
padding-left: 50px;
}
::v-deep .el-checkbox__label{
color: #565c67;
}
.checkbox-box {
  // overflow-y: scroll;
  height: 84%;
  width: 95%;
  // margin-top: 20px;
  margin:20px 0 20px 10px;
  border-radius: 4px;
  border: 1px solid #d5d9df;
}
::v-deep .el-checkbox-group {
  height: 90%;
 overflow-y: scroll; 
}
::v-deep .el-checkbox {
  display: block;
  line-height: 20px;
  white-space: normal;
  margin: 10px;
  padding-left: 20px;
}
::v-deep .el-dialog__close{
  border: 1px solid #fff;
  color: #fff;
  border-radius: 50%;
}
::v-deep .el-checkbox__input .is-checked{
    color: $labelColor !important;
}
::v-deep .is-checked .el-checkbox__inner{
  background-color: $labelColor !important;

}
::v-deep .is-checked .el-checkbox__inner::after{
    height: 13px;
    width: 7px;
    border-color: #fff;
    top: -1px;
}
.bootonclose{
  width: 122px;
  height: 40px;
  background-color: #fff;
  border: 1px solid #e8eaec;
  border-radius:4px ;
  font-size: 16px;
  color:  $labelColor;
}
.bootonok{
   width: 122px;
  height: 40px;
  background-color: $labelColor;
  border-radius:4px ;
  color:  #fff;
  margin-left: 20px;
  font-size: 16px;
}
</style>
